<template>
  <a-card title="" v-if="!isSuccess">
    <a-row style="margin-bottom: 10px">
      <a-col :span="16"><h3> 受理信息</h3> </a-col>
      <a-col :span="8" style="text-align: right">
        <a-button v-if="!formDisabled" @click="handleSubmit">保存</a-button>
        <a-button type="primary" v-if="!formDisabled" @click="handleSubmit" style="margin-left: 4px">提交</a-button>
      </a-col>
    </a-row>
    <gc-project-entry-form ref="formComponent" :formDisabled="formDisabled" :formBpm="false" @success="submitSuccess"></gc-project-entry-form>
  </a-card>
  <a-result v-if="isSuccess" status="success" title="操作成功!" sub-title="受理信息提交成功.">
    <template #extra>
      <a-button key="console" type="primary">返回首页</a-button>
    </template>
  </a-result>
</template>

<script lang="ts">
import { ref, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import GcProjectEntryForm from './components/GcProjectEntryForm.vue';

export default {
  name: 'TestCgMainVxeModal',
  components: {
    BasicModal,
    GcProjectEntryForm,
  },
  emits: ['register', 'success'],
  setup(_p, { emit }) {
    const formComponent = ref();
    const isUpdate = ref(true);
    const formDisabled = ref(false);
    const title = ref('');
    const isSuccess = ref(false);

    //表单赋值
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
      isUpdate.value = !!data?.isUpdate;
      formDisabled.value = !data?.showFooter;
      title.value = data?.isUpdate ? (unref(formDisabled) ? '详情' : '编辑') : '新增';
      isSuccess.value = false;
      if (unref(isUpdate)) {
        formComponent.value.edit(data.record);
      } else {
        formComponent.value.add();
      }
    });

    function handleSubmit() {
      formComponent.value.submitForm();
    }

    function submitSuccess() {
      emit('success');
      formDisabled.value = true;
      isSuccess.value = true;
    }

    return {
      registerModal,
      title,
      formComponent,
      formDisabled,
      handleSubmit,
      submitSuccess,
      isSuccess
    };
  },
};
</script>
<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}
</style>